<template>
  <div>
    <div class="wzfl">
      <div class="glfltit" v-if="$store.state.wzfl">
        <h3>文章分类</h3>
        <a-icon @click="quxiao" type="close" />
      </div>
      <div :class="$store.state.wzfl==true?'gj_wzfl':''">
        <div :class="$store.state.wzfl==true?'addwzfl':''">
          <a-button
            type="primary"
            class="editable-add-btn"
            :class="$store.state.wzfl==true?'button':''"
            @click="showModal"
          >添加分类</a-button>
          <a-modal
            title="添加分类"
            :visible="visible"
            @ok="handleOk"
            :confirmLoading="confirmLoading"
            @cancel="handleCancel"
          >
            <p v-show="language.cnName!=0?true:false">
              <span class="fl_t">中文：</span>
              <a-auto-complete
                v-model="flname"
                :dataSource="fldata"
                style="width: 300px"
                placeholder="中文名称"
                :filterOption="filterOption"
              />
            </p>
            <p v-show="language.enName!=0?true:false">
              <span class="fl_t">英文：</span>
              <a-input placeholder="英文名称" style="width: 300px" v-model="fl_enname" />
            </p>
            <p v-show="language.ruName!=0?true:false">
              <span class="fl_t">俄文：</span>
              <a-input placeholder="俄文名称" style="width: 300px" v-model="fl_runame" />
            </p>
            <p v-show="language.dwName!=0?true:false">
              <span class="fl_t">德文：</span>
              <a-input placeholder="德文名称" style="width: 300px" v-model="fl_dwname" />
            </p>
            <p v-show="language.jaName!=0?true:false">
              <span class="fl_t">日文：</span>
              <a-input placeholder="日文名称" style="width: 300px" v-model="fl_janame" />
            </p>
          </a-modal>
        </div>
        <a-table :dataSource="dataSource" :pagination="true" @change="getwzfl" :columns="columns">
          <template
            v-for="col in ['articleName','en_articleName','dw_articleName','ru_articleName','ja_articleName']"
            :slot="col"
            slot-scope="text, record, index"
          >
            <div :key="col">
              <a-input
                v-if="record.editable"
                style="margin: -5px 0"
                :value="text"
                @change="e => handleChange(record,e.target.value, record.key, col)"
              />
              <template v-else>{{text}}</template>
            </div>
          </template>

          <template slot="paixu" slot-scope="text, record">
            <span class="paixu" @click="()=>nodeUp(record.key, record)">
              <a-icon type="arrow-up" />
            </span>
            <span class="paixu" @click="()=>nodeDown(record.key, record)">
              <a-icon type="arrow-down" />
            </span>
          </template>
          <template slot="operation" slot-scope="text, record">
            <div class="editable-row-operations">
              <span v-if="record.editable">
                <a class="del" @click="() => save(record.key)">保存</a>
                <a-popconfirm title="确定取消吗?" @confirm="() => cancel(record.key)">
                  <a>取消</a>
                </a-popconfirm>
              </span>
              <span v-else>
                <a class="del" @click="() => edit(record,record.key)">修改</a>
                <a-popconfirm
                  v-if="dataSource.length"
                  title="确定删除吗?"
                  @confirm="() => onDelete(record,record.key)"
                >
                  <a>删除</a>
                </a-popconfirm>
              </span>
            </div>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
const dataSource = [];
const columns = [
  {
    title: "编号",
    dataIndex: "id_num",
    scopedSlots: { customRender: "id_num" }
  },
  {
    title: "中文",
    dataIndex: "articleName",
    scopedSlots: { customRender: "articleName" }
  },
  {
    title: "英文",
    dataIndex: "en_articleName",
    scopedSlots: { customRender: "en_articleName" }
  },
  {
    title: "德文",
    dataIndex: "dw_articleName",
    scopedSlots: { customRender: "dw_articleName" }
  },
  {
    title: "俄文",
    dataIndex: "ru_articleName",
    scopedSlots: { customRender: "ru_articleName" }
  },
  {
    title: "日文",
    dataIndex: "ja_articleName",
    scopedSlots: { customRender: "ja_articleName" }
  },
  {
    title: "排序",
    dataIndex: "paixu",
    scopedSlots: { customRender: "paixu" }
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];
export default {
  data() {
    this.cacheData = dataSource.map(item => ({ ...item }));
    return {
      dataSource,
      columns,
      count: 2,
      visible: false,
      confirmLoading: false,
      flname: "",
      fl_enname: "",
      fl_runame: "",
      fl_dwname: "",
      fl_janame: "",
      fldata: [],
      language: ""
    };
  },

  methods: {
    onCellChange(key, dataIndex, value) {
      const dataSource = [...this.dataSource];
      const target = dataSource.find(item => item.key === key);
      if (target) {
        target[dataIndex] = value;
        this.dataSource = dataSource;
      }
    },
    onDelete(value, key) {
      const dataSource = [...this.dataSource];
      this.dataSource = dataSource.filter(item => item.key !== key);
      this.axios
        .post(
          "wenzhang/ArticleClassDelete.php",
          qs.stringify({ id_num: value.id_num })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },

    showModal() {
      this.visible = true;
    },
    handleOk() {
      this.axios
        .post(
          "wenzhang/ArticleClassAdd.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid,
            articleName: this.flname,
            en_articleName: this.fl_enname,
            ja_articleName: this.fl_janame,
            ru_articleName: this.fl_runame,
            dw_articleName: this.fl_dwname,
            language: 0
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.visible = false;
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });

            const { count, dataSource } = this;
            const newData = {
              key: res.data.result.lastId,
              id_num: res.data.result.lastId,
              articleName: this.flname
            };
            this.dataSource = [...dataSource, newData];
            this.count = count + 1;
            this.flname = "";
          } else {
            this.visible = false;
            this.flname = "";
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    handleCancel(e) {
      this.visible = false;
      this.flname = "";
    },
    // 节点上移
    nodeUp(key, data) {
      this.axios
        .post(
          "wenzhang/ArticleClassUpSort.php",
          qs.stringify({
            id_num: data.id_num,
            language: 0,
            sqdwid: this.$store.state.bbl_sqdwid
          })
        )
        .then(res => {
          this.getwzfl();
        });
    },

    // 节点下移
    nodeDown(index, data) {
      this.axios
        .post(
          "wenzhang/ArticleClassDownSort.php",
          qs.stringify({
            id_num: data.id_num,
            language: 0,
            sqdwid: this.$store.state.bbl_sqdwid
          })
        )
        .then(res => {
          this.getwzfl();
        });
    },
    quxiao() {
      this.$store.state.wzfl = false;
    },
    //文章分类--列表
    getwzfl() {
      this.axios
        .post(
          "wenzhang/ArticleClassList.php",
          qs.stringify({
            sqdwid:
              this.$store.state.glxgsqdwid == ""
                ? this.$store.state.bbl_sqdwid
                : this.$store.state.glxgsqdwid,
            language: "0"
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.dataSource = res.data.result.data;
            for (var i = 0; i < res.data.result.data.length; i++) {
              this.dataSource[i].key = i;
            }
          }
        });
    },

    handleChange(record, value, key, column) {
      console.log(record);
      const newData = [...this.dataSource];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.dataSource = newData;
      }
    },
    edit(value, key) {
      console.log(value);
      const newData = [...this.dataSource];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        target.editable = true;
        this.dataSource = newData;
      }
    },
    save(key) {
      const newData = [...this.dataSource];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        delete target.editable;
        this.dataSource = newData;
        this.cacheData = newData.map(item => ({ ...item }));

        this.axios
          .post(
            "wenzhang/ArticleClassEdit.php",
            qs.stringify({
              id_num: target.id_num,
              articleName: target.articleName,
              en_articleName: target.en_articleName,
              dw_articleName: target.dw_articleName,
              ru_articleName: target.ru_articleName,
              ja_articleName: target.ja_articleName
            })
          )
          .then(res => {
            if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      }
    },
    cancel(key) {
      const newData = [...this.dataSource];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        Object.assign(
          target,
          this.cacheData.filter(item => key === item.key)[0]
        );
        delete target.editable;
        this.dataSource = newData;
      }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toUpperCase()
          .indexOf(input.toUpperCase()) >= 0
      );
    },
    getflname() {
      this.axios
        .post(
          "wenzhang/ArticleClassAddList.php",
          qs.stringify({ class: "article" })
        )
        .then(res => {
          for (var i = 0; i < res.data.result.length; i++) {
            this.fldata.push(res.data.result[i].cname);
          }
        });
    }
  },

  created() {
    this.language = JSON.parse(sessionStorage.getItem("language"));
    console.log(this.language);

    this.getwzfl();
    this.getflname();
  }
};
</script>

<style lang='less'>
.fl_t {
  display: inline-block;
  width: 100px;
  text-align: right;
}
.wzfl {
  width: 98%;
  height: auto;
  position: relative;
  top: 100px;
  left: 1%;
  // box-shadow: 0 0 5px #ccc;
  border: 1px solid #ccc;
  text-align: left;
  background-color: #fff;

  .paixu {
    margin: 0 5px;
    cursor: pointer;
  }
  .gj_wzfl {
    padding: 0 20px;
  }
  .glfltit {
    width: 100%;
    height: 72px;
    padding: 25px 35px;
    display: flex;
    justify-content: space-between;
    line-height: 20px !important;
    border-bottom: 1px solid #ccc;
    h3 {
      font-size: 18px;
    }
    .anticon-close {
      font-weight: normal;
      font-size: 22px;
    }
  }
  .addwzfl {
    display: flex;
    justify-content: space-between;
    .addwzfl_tit {
      font-size: 14px;
    }
  }
  .editable-add-btn {
    margin: 15px 20px;
  }
  .button {
    margin: 15px 0;
  }
  .editable-add-btn:hover {
    background-color: #1890ff;
    border: 0 !important;
    color: #fff !important;
  }
  .editable-cell {
    position: relative;
  }

  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    line-height: 18px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell:hover .editable-cell-icon {
    display: inline-block;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
  .ant-input {
    width: 70% !important;
  }
  .ant-table-wrapper {
    padding-bottom: 30px !important;
  }

  .wzfl_btn {
    position: absolute;
    bottom: 39px;
    left: 50%;
    transform: translateX(-50%);
    .bc {
      background-color: #1890ff !important;
      color: #fff !important;
    }
    button {
      width: 100px !important;
      margin: 0 20px;
    }
    button:hover {
      background-color: #1890ff;
      border: 0 !important;
      color: #fff !important;
    }
  }
}
</style>
